<template>
    <div>
        <el-dialog :title="addInfo.isAdd ? '添加角色' : '编辑角色'" :visible.sync="addInfo.isShow" center :before-close="cancel">
            <el-form :model="roleFrom" :rules="rules" ref="roleRef">
                <el-form-item label="角色名称" :label-width="formLabelWidth" prop="rolename">
                    <el-input autocomplete="off" v-model="roleFrom.rolename"></el-input>
                </el-form-item>
                <el-form-item label="角色权限" :label-width="formLabelWidth">
                    <el-tree :data="$store.getters['menu/getMenu']" show-checkbox ref="tree" node-key="id" :props="{
                            children: 'children',
                            label: 'title'
                        }" check-strictly default-expand-all>
                    </el-tree>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="roleFrom.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>
<script>
import { roleAdd, roleInfo, roleEdit } from '../../request/api'
export default {
    props: ['addInfo'],
    data() {
        return {
            formLabelWidth: '120px',
            roleFrom: {
                rolename: '',
                menus: '',
                status: 1
            },
            rules: {
                rolename: [
                    { required: true, message: "请输入角色名称", trigger: "blur" },
                    { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
                ],
            }
        }
    },
    methods: {
        // 数据回显
        async lookUp(id) {
            let res = await roleInfo({ id })
            console.log(res.list);
            this.roleFrom = res.list
            this.roleFrom.id = id
            console.log(id, '一条角色数据');
            this.$refs.tree.setCheckedKeys(this.roleFrom.menus ? this.roleFrom.menus.split(',') : [])
        },
        cancel() {
            this.$emit('cancel', false)
            this.reset()
        },
        // 清空
        reset() {
            // 清空树节点选中状态
            this.$refs.tree.setCheckedKeys([])
            this.roleFrom = {
                rolename: '',
                menus: '',
                status: 1
            }
            this.$refs.roleRef.resetFields()

        },
        // 封装一个确认方法
        confirm() {
            this.$refs.roleRef.validate((val) => {
                if (val) {
                    // 添加
                    this.roleFrom.menus = this.$refs.tree.getCheckedKeys().join(",")
                    if (this.addInfo.isAdd) {
                        roleAdd(this.roleFrom)
                            .then(res => {
                                console.log(res)
                                if (res.code == 200) {
                                    this.$message.success(res.msg)
                                    // 关闭弹框
                                    this.cancel()
                                    // 获取列表
                                    this.$store.dispatch('role/getRoleListAction')
                                } else {
                                    this.$message.error(res.msg)
                                }
                            })
                    } else {
                        // 编辑
                        roleEdit(this.roleFrom).then((res) => {
                            console.log(res);
                            if (res.code == 200) {
                                this.$message.success(res.msg);
                                //关闭弹框
                                this.cancel();
                                //获取列表
                                this.$store.dispatch("role/getRoleListAction");
                            } else {
                                this.$message.error(res.msg);
                            }
                        });
                    }
                }
            })
        }
    },
    mounted() {
        //减少服务端请求 （判断菜单列表是否存在）
        if (this.$store.getters['menu/getMenu'].length == 0) {
            // 调用菜单行动
            this.$store.dispatch('menu/getMenuListAciton')
        }


    },
    watch: {},
    computed: {},
    filters: {},
    components: {}
}
</script>
<style scoped></style>